<!-- 查看/审核 破底价 -->
<template>
  <Modal v-model="modalStatus" :title="info.title" @on-cancel="cancel" width="1000"
    :footerHide="true">
    <order-msg v-if="modalStatus" :detailMsg="info" :orderStatusName="orderStatusName"
      @auditSuccess='onAuditSuccess' :isCompanyBase='isCompanyBase'></order-msg>
    <Row class="content">
      <Col :span="12">
      <span class="label">申请日期:</span>
      <span>{{info.createTime ? info.createTime.split(' ')[0] : ''}}</span>
      </Col>
      <Col :span="12">
      <span class="label">订单类型:</span> <span>{{info.orderType}}</span>
      </Col>
    </Row>
    <Row class="content">
      <Col :span="12">
      <span class="label">底单价:</span> <span>{{info.basicPrice}}元/㎡</span>
      </Col>
      <Col :span="12">
      <span class="label">底总价:</span> <span>{{info.basicTotalPrice}}元</span>
      </Col>
    </Row>
    <Row class="content">
      <Col :span="12">
      <span class="label">{{info.orderType}}单价:</span> <span>{{info.unitPrice}}元</span>
      </Col>
      <Col :span="12">
      <span class="label">{{info.orderType}}总价:</span>
      <span>{{info.orderAmount}}元</span>
      </Col>
    </Row>
    <Row class="content" v-for="(itemObj,indexObj) in list" :key="indexObj">
      <Col :span="24" class="content_flex">
      <span class="label">{{itemObj.title}}</span>
      <div class="content_base_price">
        <span
          style="word-break: break-all; lineHeight:25px;padding:12px 0;">{{info[itemObj.key]||'-'}}</span>
        <div v-if="info[itemObj.imgsKey]!=''">
          <div class="demo_upload_list"
            v-for="(item,index) in info[itemObj.imgsKey].split(',')" :key="index">
            <template>
              <img :src="item">
              <div class="demo_upload_list_cover">
                <Icon type="ios-eye-outline"
                  @click.native="preViewImgFun(info[itemObj.imgsKey],index)">
                </Icon>
              </div>
            </template>
          </div>
        </div>
      </div>
      </Col>
    </Row>
    <div class="flex flex-horizontal-end btn-operate">
      <div v-if="info.flag == 'check'">
        <Button type="primary" @click='processFun'>流程信息</Button>
      </div>
      <div v-else>
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="auditFun()" style="margin-left: 8px">审批</Button>
      </div>
    </div>
    <process-modal ref="process" />
    <audit-modal ref="audit" :isGogoPrve='false' @auditSuccess='auditSuccess' />
    <preview-image :images="preViewImg" :showIndex="showIndex" :showDownLoad='true'
      ref="preViewImage">
    </preview-image>
  </Modal>
</template>

<script>
  import processModal from '@/components/biz/audit/process-modal.vue'
  import auditModal from '@/components/biz/audit/audit-modal.vue'
  import orderMsg from './orderMsg'
  import subMgr from '@/biz/sales/subOrder'
  import contractMgr from '@/biz/sales/contractOrder.js'

  export default {
    components: { orderMsg, processModal, auditModal },
    props: ['isCompanyBase'],
    data() {
      return {
        modalStatus: false,
        orderStatusName: '',
        info: {},
        showIndex: 0,
        preViewImg: [],
        subList: [
        {
          title: '认购破底价说明:',
          key: 'subBreakExplain',
          imgsKey: 'subBreakAnnex'
        }],
        cusList: [
        {
          title: '签约破底价说明:',
          key: 'orConBreakExplain',
          imgsKey: 'orConBreakAnnex'
        }],
        list: []
      };
    },
    methods: {
      show(data) {
        this.modalStatus = true;
        this.orderStatusName = data.orderType;
        this.info = { ...data, ...data.auditData };
        console.log(this.info, 'info')
        this.info.createTime = this.$tool.formatterDate(data.createTime)
        // 展示认购单编号/签约单编号
        if (data.orderTypeEn === 'RG') {
          this.info.contractCode = data.orderCode
          this.list = this.subList
        } else if (data.orderTypeEn === 'QY') {
          this.info.contractCode = data.contractCode
          this.list = this.subList.concat(this.cusList)
        }
      },
      cancel() {
        this.modalStatus = false;
      },
      onAuditSuccess() {
        console.log('审核完成')
      },
      auditFun() {
        this.$refs.audit.show({
          auditId: this.info.auditId,
          businessId: this.info.businessId,
          auditType: 9
        })
      },
      processFun() {
        this.$refs.process.show({
          businessId: this.info.businessId,
          auditType: 9
        })
      },
      preViewImgFun(images, index) {
        this.preViewImg = images ? images.split(',') : []
        console.log(this.preViewImg, index, 123)
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      //审核通过
      auditSuccess() {
        this.modalStatus = false;
        this.$emit('success')
      }
    },
    mounted() {
      console.log(this.isCompanyBase, '123123')
    },
  }
</script>
<style lang='scss' scoped>
  .content {
    font-size: 16px;
    line-height: 50px;

    .label {
      width: 200px;
      display: inline-block;
      text-align: right;
    }
  }

  .content_flex {
    display: flex;

    .content_base_price {
      display: flex;
      flex-direction: column;
      width: calc(100% - 200px);
      flex: 1
    }

    .demo_upload_list {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
      margin-right: 4px;
    }

    .demo_upload_list img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .demo_upload_list_cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);
    }

    .demo_upload_list:hover .demo_upload_list_cover {
      display: block;
    }

    .demo_upload_list_cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }
  }
</style>